<template>
    <div>
      <!-- 2.使用图标 -->
      <!-- 添加反向箭头 点击时让箭头向下反转 -->
      <el-icon @click="ck"><caret-right />
        <caret-left v-if="store.state.homeview.navBool"/>
        <caret-right v-else/>
    </el-icon>
    </div>
  </template>
  <script lang="ts" setup>
  // 1.引用图标
  import { CaretRight , CaretLeft} from "@element-plus/icons-vue";
  //引用全局状态管理工具 
  import { useStore } from "vuex";
  
  //调用store对象
  const store = useStore();

  let ck=()=>{
    //   console.log("我被点击了")
    // 触发mutation 修改


    // commit 提交 mutation修改 参数是名字 名字存放数据
    store.commit("SET_NAVBOOL")
  }


  </script>
  <style lang="scss">
  .el-header{
      line-height: 70px;//设置图标垂直居中
      .el-icon{
          font-size:20px;//设置图标大小
      }
  }
  </style>